<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <link rel="stylesheet" type="text/css" href="${ctxPath}/static/sui/semantic.amazon.min.css">
  <script src="${ctxPath}/static/sui/jquery-3.1.1.min.js"></script>
  <script src="${ctxPath}/static/sui/semantic.min.js"></script>
</head>

<body style="min-width:auto;padding:15px">
<div class="ui center">
  <form class="ui form">
    <div class="field">
      <label>缩略图预览</label>
      <div class="ui segment" style="margin:0px;border:none;box-shadow:none;-webkit-box-shadow:none">
        <img id="thumbnail" style="margin: 0 auto;height: 300px;margin-bottom:18px;" class="ui medium rounded image" src="${ctxPath}/static/img/square-image.png">
        <div class="ui bottom attached label" style="text-align:center;background-color:#fff">
          <button type="button" class="ui left button" id="load_current_material">加载当前材质</button>
          <button type="button" class="right ui button" id="use_print_screen">使用屏幕截图</button>
        </div>
      </div>
    </div>
    <div class="field">
      <label>材质名称</label>
      <input type="text" id="matname">
      <input type="hidden" id="su_mat_name">

    </div>
    <div class="field">
      <label>材质分类</label>
      <select id="category" class="ui fluid normal dropdown">
        @for(s in cats){
        <option value="${s.code}">${s.name}</option>
        @}
      </select>
    </div>
    <h4>材质类型</h4>
    <div class="inline field">
      <input type="hidden" id="vray" value="1">
      <input type="hidden" id="enscape" value="0">
      <input type="hidden" id="thea" value="0">
      <div class="ui toggle checkbox">
        <input data-value="vray" type="checkbox" checked="checked" class="hidden">
        <label>Vray</label>
      </div>
    </div>
    <div class="ui  buttons">
      <button type="button" id="upload_btn" class="ui button primary">上传材质</button>
      <div class="or"></div>
      <button type="button" id="close_btn" class="ui button secondary">取消退出</button>
    </div>
    <div id="msg" style="display: none;" class="ui orange message">材质正在上传,请不要进行任何其他操作.等待完毕</div>


  </form>
  <div id="successDlg" class="ui modal mini">
    <div class="header">提示</div>
    <div class="content">
      <p>上传成功.</p>
    </div>
    <div class="actions">
      <div class="ui approve button">确定</div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript">
  thumbnail_file="";
  $(function () {
    $('#category').dropdown();
    $('.checkbox').checkbox({
      onChange: function () {
        $('#' + $(this).data('value')).val($(this).parent().checkbox('is checked') ? 1 : 0);
      }
    });
    $('#load_current_material').click(function(e) {
      e.stopPropagation();
      sketchup.load_current_material();
    });
    $('#use_print_screen').click(function(e){
      e.stopPropagation();
      sketchup.load_print_screen();
    });
    $('#close_btn').click(function () {
      window.close();
    });
    $('#upload_btn').click(function (e) {
      e.stopPropagation();
      if ($('#matname').val().length === 0) {
        alert('必须有材质名称.');
        return false;
      }
      $('#upload_btn').addClass("loading disabled");
      $('#close_btn').addClass("disabled");
      $('#msg').show();
      sketchup.upload_material($('#su_mat_name').val(),$('#matname').val(),$('#category').dropdown('get value'),thumbnail_file,$('#vray').val());
    });
  });

  function retry() {
    $('#msg').hide();
    $('#upload_btn').removeClass("loading disabled");
    $('#close_btn').removeClass("disabled");
  }
  function load_su_texture(name,display_name,filepath,data) {
    $('#matname').val(display_name);
    $('#su_mat_name').val(name);
    thumbnail_file = filepath;
    $('#thumbnail').attr('src',data);
  }
</script>

</html>